<template>
  <div class="app-container">
    <el-tabs v-model="activeName" style="padding-left: 8px;">
      <el-tab-pane label="月薪计算" name="first">
        <!-- 月薪计算 -->
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px">
            <el-card class="box-card">
              <!--表格渲染-->
              <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
                <el-form-item label="月份">
                  <el-select
                    v-model="form.month"
                    clearable
                    size="small"
                    placeholder="请选择"
                    class="filter-item"
                    style="width: 90px"
                  >
                    <el-option
                      v-for="item in months"
                      :key="item.key"
                      :label="item.label"
                      :value="item.key"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="税前薪资" prop="salaryBeforeTax">
                  <el-input v-model="form.salaryBeforeTax" type="number" style="width: 40%;" />
                  <span style="color: #C0C0C0;margin-left: 10px;">税前的工资收入</span>
                </el-form-item>
                <el-form-item label="专项附加" prop="specialAddonAmount">
                  <el-input v-model="form.specialAddonAmount" type="number" style="width: 40%;" />
                  <span style="color: #C0C0C0;margin-left: 10px;">赡养老人孩子教育房贷房租</span>
                </el-form-item>
                <el-form-item label="">
                  <el-button :loading="loading" size="medium" type="primary" @click="doSubmit">计算薪资</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <!-- 字典详情列表 -->
          <el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>基本项目</span>
              </div>
              <div>
                <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--small" style="width: 100%;">
                  <table class="el-table__header">
                    <tr>
                      <th align="right" width="300">月份</th>
                      <td>{{ monthSalaryResult.month }}月</td>
                    </tr>
                    <tr>
                      <th align="right" width="300">应发工资</th>
                      <td>{{ monthSalaryResult.salaryBeforeTax && monthSalaryResult.salaryBeforeTax.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">个人所得税</th>
                      <td>{{ monthSalaryResult.personalTax.taxAmount && monthSalaryResult.personalTax.taxAmount.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">实发工资</th>
                      <td>{{ monthSalaryResult.salaryAfterTax && monthSalaryResult.salaryAfterTax.toFixed(2) }}</td>
                    </tr>
                    <hr>
                    <!-- <tr>
                      <td colspan="2">
                        <hr/>
                      </td>
                    </tr> -->
                    <tr>
                      <th align="right">累计工资薪金收入(含当月)</th>
                      <td>{{ monthSalaryResult.personalTax.totalSalaryBeforeTaxOfYear && monthSalaryResult.personalTax.totalSalaryBeforeTaxOfYear.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">累计个人社保公积金(含当月)</th>
                      <td>{{ monthSalaryResult.personalTax.totalSocialDeductionAmountOfYear && monthSalaryResult.personalTax.totalSocialDeductionAmountOfYear.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">累计专项附加扣除(含当月)</th>
                      <td>{{ monthSalaryResult.personalTax.totalSpecialAddonDeductionAmountOfYear && monthSalaryResult.personalTax.totalSpecialAddonDeductionAmountOfYear.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">累计基本减除费用(含当月)</th>
                      <td>{{ monthSalaryResult.personalTax.totalDeductionAmountOfYear && monthSalaryResult.personalTax.totalDeductionAmountOfYear.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">累计应纳税所得额(含当月)</th>
                      <td>{{ monthSalaryResult.personalTax.shouldTaxSalary && monthSalaryResult.personalTax.shouldTaxSalary.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">预扣税率</th>
                      <td>{{ monthSalaryResult.personalTax.taxRate }}</td>
                    </tr>
                    <tr>
                      <th align="right">累计应纳税额</th>
                      <td>{{ monthSalaryResult.personalTax.totalShouldTaxAmountOfYear && monthSalaryResult.personalTax.totalShouldTaxAmountOfYear.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">累计已纳税额(不含当月)</th>
                      <td>{{ monthSalaryResult.personalTax.totalHasTaxAmountOfYear && monthSalaryResult.personalTax.totalHasTaxAmountOfYear.toFixed(2) }}</td>
                    </tr>

                  </table>
                </div>
              </div>
            </el-card>

            <el-card class="box-card" style="margin-top: 20px;">
              <div slot="header" class="clearfix">
                <span>社保公积金明细</span>
              </div>
              <div>
                <el-table
                  :data="monthSalaryResult.socialSecurity.items"
                  :summary-method="getSummaries"
                  show-summary
                  style="width: 100%"
                >
                  <el-table-column
                    prop="type"
                    label="类型"
                    width="85"
                  />
                  <el-table-column
                    prop="baseAmount"
                    label="基数"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.baseAmount| rounding }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="amountOfPersonal"
                    label="个人交纳额"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.amountOfPersonal| rounding }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="rateOfPersonal"
                    label="个人比例"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.rateOfPersonal * 100 }}%</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="amountOfCompany"
                    label="公司交纳额"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.amountOfCompany| rounding }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="rateOfCompany"
                    label="公司比例"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.rateOfCompany * 100 }}%</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="年薪计算" name="second">
        <!-- 年薪计算 -->
        <el-row :gutter="10">
          <el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px">
            <el-card class="box-card">
              <!--表格渲染-->
              <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="100px">
                <el-form-item label="税前薪资" prop="salaryBeforeTax">
                  <el-input v-model="form.salaryBeforeTax" type="number" style="width: 40%;" />
                  <span style="color: #C0C0C0;margin-left: 10px;">税前的工资收入</span>
                </el-form-item>
                <el-form-item label="专项附加" prop="specialAddonAmount">
                  <el-input v-model="form.specialAddonAmount" type="number" style="width: 40%;" />
                  <span style="color: #C0C0C0;margin-left: 10px;">赡养老人孩子教育房贷房租</span>
                </el-form-item>
                <el-form-item label="">
                  <el-button :loading="loading" size="medium" type="primary" @click="doCalculateYear">计算薪资</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </el-col>
          <!-- 字典详情列表 -->
          <el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>基本项目</span>
              </div>
              <div>
                <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition el-table--small" style="width: 100%;">
                  <table class="el-table__header">
                    <tr>
                      <th align="right" width="300">税前收入</th>
                      <td>{{ yearSalaryResult.totalSalaryBeforeTax && yearSalaryResult.totalSalaryBeforeTax.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">个人所得税</th>
                      <td>{{ yearSalaryResult.totalPersonalTax && yearSalaryResult.totalPersonalTax.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">税后收入</th>
                      <td>{{ yearSalaryResult.totalSalaryAfterTax&& yearSalaryResult.totalSalaryAfterTax.toFixed(2) }}</td>
                    </tr>
                    <tr>
                      <th align="right">个人社保</th>
                      <td>{{ yearSalaryResult.totalSocialSecurity && yearSalaryResult.totalSocialSecurity.toFixed(2) }}</td>
                    </tr>
                  </table>
                </div>
              </div>
            </el-card>

            <el-card class="box-card" style="margin-top: 20px;">
              <div slot="header" class="clearfix">
                <span>月收入明细</span>
              </div>
              <div>
                <el-table
                  :data="yearSalaryResult.monthDetails"
                  show-summary
                  style="width: 100%"
                >
                  <el-table-column
                    prop="month"
                    label="月份"
                    width="85"
                  />
                  <el-table-column
                    prop="salaryBeforeTax"
                    label="税前收入"
                    width="100"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.salaryBeforeTax| rounding }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="taxAmount"
                    label="个人所得税"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.personalTax.taxAmount| rounding }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="salaryAfterTax"
                    label="税后收入"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.salaryAfterTax| rounding }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="totalAmountOfPersonal"
                    label="个人社保"
                  >
                    <template slot-scope="scope">
                      <span>{{ scope.row.socialSecurity.totalAmountOfPersonal| rounding }}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { calculateMonthSalary, calculateYearSalary } from '@/api/lifetools/salary'
export default {
  name: 'Config',
  filters: {
    rounding(value) {
      return value.toFixed(2)
    }
  },
  data() {
    return {
      loading: false,
      activeName: 'first',
      form: { month: '1', salaryBeforeTax: undefined, specialAddonAmount: 0 },
      months: [
        { key: '1', label: '1月' },
        { key: '2', label: '2月' },
        { key: '3', label: '3月' },
        { key: '4', label: '4月' },
        { key: '5', label: '5月' },
        { key: '6', label: '6月' },
        { key: '7', label: '7月' },
        { key: '8', label: '8月' },
        { key: '9', label: '9月' },
        { key: '10', label: '10月' },
        { key: '11', label: '11月' },
        { key: '12', label: '12月' }
      ],
      monthSalaryResult: {
        month: undefined,
        personalTax: {
          totalSalaryBeforeTaxOfYear: undefined
        },
        salaryAfterTax: undefined,
        salaryBeforeTax: undefined,
        socialSecurity: {
          totalAmountOfCompany: undefined,
          totalAmountOfPersonal: undefined,
          items: []
        }
      },
      yearSalaryResult: {
        monthDetails: []
      },
      rules: {
        month: [
          { required: true, message: '请选择月份', trigger: 'change' }
        ],
        salaryBeforeTax: [
          { required: true, message: '请输入税前薪资', trigger: 'blur' }
        ],
        specialAddonAmount: [
          { required: true, message: '请输入专项附加金额', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // this.init()
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1 || index === 3 || index === 5) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)

          sums[index] = sums[index].toFixed(2)
          sums[index] += ' 元'
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    },
    doSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          calculateMonthSalary(this.form).then(res => {
            this.monthSalaryResult = res
            this.$notify({
              title: '计算成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false
        }
      })
    },
    doCalculateYear() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          calculateYearSalary(this.form).then(res => {
            console.log(res)
            this.yearSalaryResult = res
            this.$notify({
              title: '计算成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
          }).catch(err => {
            this.loading = false
            console.log(err.response.data.message)
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
